<template>
	<view class="mark">
		<view class="tab">
			<view class="list">
				<view class="item " :class="{'act':chain=='56'}" @click="tabChain('56')">BSC</view>
				<view class="item" :class="{'act':chain=='0'}" @click="tabChain('0')">TRON</view>
				<view class="item" :class="{'act':chain=='5867'}" @click="tabChain('5867')">JUMP</view>
			</view>
			<view class="toplines">
				<view class="line1">
					<text>名称</text>
					<!-- <image src="/static/images/market/updown.png" alt="" class="icon" /> -->
				</view>
				<view class="line2">
					<text>最新价</text>
					<!-- <image src="@/static/images/market/updown.png" alt="" class="icon" /> -->
				</view>
				<view class="line3">
					<text>24h涨跌</text>
					<!-- <image src="/static/images/market/updown.png" alt="" class="icon" /> -->
				</view>
			</view>
		</view>
		<scroll-view class="scroll" refresher-background="#fff;" :refresher-triggered="triggered"
			@refresherrefresh="onRefresh" scroll-y="true" refresher-enabled="false">
			<view class="bibox">
				<view class="hangqing">
					<view class="coins__list">
						<view v-for="coin in marketData" :key="coin.id" class="coin-row" @click="marketChart(coin.id)">
							<view class="coin-row__info">
								<view class="coinBox">
									<img :src="coin.image" :alt="coin.name" />
								</view>
								<view class="coin_name">
									<view><text class="coin-row__name">{{ coin.name }}</text></view>
									<view>
										<text class="coin-row__meta">{{ coin.symbol }}
											{{ currencySymbol }}{{ formatCompact(coin.volume) }}
										</text>
									</view>
								</view>
							</view>
							<view class="coin-row__price">
								<text class="strong">{{ formatPrimaryPrice(coin.price) }}</text>
								<text>{{ currencySymbol }} {{ formatSecondaryPrice(coin.price) }}</text>
							</view>
							<view class="coin-row__change_box">
								<text class="coin-row__change" :class="coin.change24h >= 0 ? 'is-up' : 'is-down'">
									{{ formatPercentage(coin.change24h) }}
								</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		geMarkinfo,
	} from '@/http/api.js';
	export default {
		data() {
			return {
				chain: "56",
				currencySymbol: "$",
				VS_CURRENCY: "usd",
				marketData: [],
				triggered: false

			}
		},
		watch: {},
		mounted() {
			this.getdata()
		},
		methods: {
			tabChain(chain) {
				this.chain = chain
				this.getdata()
			},
			marketChart(id) {
				uni.navigateTo({
					url: `/pages/marketChart/marketChart?id=${id}`
				})
			},
			getdata() {
				// this.showLoading()
				var param = {
					chain: this.chain
				}
				geMarkinfo(param).then((res) => {
					if (res.code == 200) {
						this.marketData = res.data.map((coin) => ({
							id: coin.id,
							name: coin.token_name,
							symbol: coin.token_symbol.toUpperCase(),
							price: coin.price,
							change24h: coin.change,
							volume: coin.h24_usd,
							image: coin.token_img
						}))
					}
				}).catch(err => {

				}).finally(() => {
					// this.hideLoading()
				})
			},
			// 下拉刷新功能
			onRefresh() {
				this.triggered = true; // 开始刷新动画
				setTimeout(() => {
					this.triggered = false; // ✅ 结束刷新动画
				}, 1000);
				this.getdata()
			},
			formatCompact(value) {
				if (value === null || value === undefined) return '-';
				return Number(value).toLocaleString(undefined, {
					notation: 'compact',
					maximumFractionDigits: 2
				});
			},
			formatPrimaryPrice(value) {
				if (value === null || value === undefined) return '-';
				if (value >= 1) {
					return Number(value).toLocaleString(undefined, {
						minimumFractionDigits: 2,
						maximumFractionDigits: 2
					});
				}
				return Number(value).toFixed(6);
			},
			formatSecondaryPrice(value) {
				if (value === null || value === undefined) return '-';
				return Number(value).toLocaleString(undefined, {
					minimumFractionDigits: 5,
					maximumFractionDigits: 5
				});
			},
			formatPercentage(value) {
				if (value === null || value === undefined || Number.isNaN(Number(value))) return '-';
				const formatted = Math.abs(Number(value)).toFixed(2);
				return `${value >= 0 ? '+' : '-'}${formatted}%`;
			},
			showLoading() {
				uni.showLoading({
					title: '加载中',
					mask: true,
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.mark {
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		background-color: #F7F7F7;
		padding-top:26upx;
	}

	.tab {
		background: #FFF;
		.list {
			display: flex;
			padding: 20upx 30upx;
			gap: 20upx;

			.item {
				// background: #fff;
				border-radius: 10upx;
				padding: 10upx 20upx;
				font-size: 24upx;
			}

			.act {
				background: #297814;
				color: #FFF;
			}

		}

		.toplines {
			display: flex;
			justify-content: space-between;
			// padding:20upx;
			font-size: 24upx;
			align-items: center;
			gap: 12upx;
			border-bottom: 1px solid #F7F7F7;
			border-top: 1px solid #F7F7F7;
			padding: 20upx;

			.icon {
				width: 12upx;
				height: 16upx;
				margin-left: 4upx;
			}

			.line1 {
				display: flex;
				align-items: center;
				flex: 1 1 0;
				margin-left: 20upx;
			}

			.line2 {
				align-items: center;
				display: flex;
				text-align: right;
				justify-content: flex-end;
				margin-right: 20upx;
			}

			.line3 {
				align-items: center;
				display: flex;
				justify-content: flex-end;
				margin-right: 20upx;
				min-width: 150upx;
			}
		}
	}
	.scroll{
		min-height: 0upx;
		flex: 1;
		padding-bottom:120upx;
	}



	.bibox {
		min-height: 100%;
		background: #FFF;

		.hangqing {
			width: 720upx;
			margin: 0upx auto;
			box-sizing: border-box;
			padding-bottom: 40upx;
		}

		.coins__list {
			padding: 10upx 10upx;
			padding-bottom:100upx;
			.coin-row {
				display: flex;
				align-items: center;
				gap: 12upx;
				padding: 15upx 12upx;
				border-radius: 18upx;

				.coin-row__info {
					flex: 1;
					display: flex;
					align-items: center;
					gap: 12upx;

					.coinBox {
						width: 68upx;
						height: 68upx;
						display: flex;

						img {
							width: 68upx;
							height: 68upx;
							border-radius: 50%;
							background: #fff;
						}
					}


					.coin-row__name {
						margin: 0;
						font-size: 24upx;
						font-weight: 600;
						color: #2C2C2C;
					}

					.coin-row__meta {
						margin: 2px 0 0;
						font-size: 20upx;
						color: #767676;
						text-transform: uppercase;
					}
				}

				.coin-row__price {
					width: 150upx;
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					font-size: 20upx;
					color: #767676;

					.strong {
						font-size: 24upx;
						font-weight: 600;
						color: #1f2a44;
					}
				}

				.coin-row__change_box {
					width: 80px;
					display: flex;
					justify-content: flex-end;

					.coin-row__change {
						width: 58px;
						height: 34px;
						line-height: 34px;
						text-align: center;
						border-radius: 5px;
						font-size: 12px;
						font-weight: 600;
						color: #fff;
					}

					.coin-row__change.is-up {
						background: #16A47A;
					}

					.coin-row__change.is-down {
						background: #E96054;
					}
				}





			}
		}
	}
</style>